<template>
  <div>
    <a-card class="card">
      <template slot="title" >
        <span style="display:flex;align-items: center;">
          衰退计划
          <a-tooltip style="margin-left:6px;">
            <template slot="title">
              和过去三天比，展点消销任意一项跌幅超20%
            </template>
            <a-icon style="cursor: pointer;" type="exclamation-circle" :style="{ fontSize: '12px',color:'#888888' }"/>
          </a-tooltip>
        </span>
      </template>
      <a-input-search placeholder="搜索账户" enter-button @search="onSearch" v-model="keyWord" style="width:250px;margin-bottom:20px;margin-right:20px;" />
      <a-select v-model="optimizer" @change="selectChange" style="width: 120px;margin-bottom: 20px;" :disabled="optimizerSelectDisable">
        <a-select-option :value="0">
          全部
        </a-select-option>
        <a-select-option :value="item.id" v-for="(item,index) in optimizerList" :key="index">
          {{item.username}}
        </a-select-option> 
      </a-select>
      <!-- <a-button @click="open" type="primary" style="margin-left: 20px;">批量启用</a-button> -->
      <!-- <a-button @click="stop" style="margin-left: 20px;">批量暂停</a-button> -->
      <standard-table
        showAlert
        rowKey="campaignId"
        :loading='loading'
        :columns="columns"
        :dataSource="dataSource"
        :scroll="{x:1200}"
        :pagination="{showTotal:total => `共 ${total} 条数据`}"
        @change="onChange"
        :selectedRows.sync="selectedRowKeys"
        @selectedRowChange="selectedRowChange"
      >
        <div slot="campaignNameStatus" slot-scope="{record}">
          <p style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{{record.campaignNameStatus}}</p> 
        </div>
        <div slot="ctr" slot-scope="{record}">
          {{(record.ctr*100).toFixed(2) + '%'}}
        </div>
        <div slot="cost" slot-scope="{record}">
          {{(record.cost).toFixed(2)}}
        </div>
        <div slot="diff" slot-scope="{record}">
          {{(record.diff).toFixed(2)}}
        </div>
        <div slot="act" slot-scope="{record}">
          {{(record.act).toFixed(2)}}
        </div>
        <div slot="diff_cost" slot-scope="{record}">
          {{(record.diff_cost).toFixed(2)}}
        </div>
        
      </standard-table>
    </a-card>  
  </div>
</template>

<script>
import { getRecessions } from '@/api/dianshang/dianshang'
import StandardTable from '@/components/table/StandardTable'
import {getOptimizerList} from '@/api/xinxiliu/account'

const columns = [
  // {
  //   title: '推广计划',
  //   width: 600,
  //   dataIndex: 'campaignNameStatus',
  // },
  {
    title: '账户',
    width: 200,
    dataIndex: 'userName'
  },
  {
    title: '计划名称',
    width: 240,
    dataIndex: 'campaignNameStatus',
    scopedSlots: { customRender: 'campaignNameStatus' },
  },
  {
    title: '展现',
    width: 100,
    dataIndex: 'impression',
    sortDirections:['descend','ascend'],
    sorter: (a,b) => a.impression-b.impression,
  },
  {
    title: '点击',
    width: 100,
    dataIndex: 'click',
    sortDirections:['descend','ascend'],
    sorter: (a,b) => a.click-b.click,
  },
  {
    title: '消费',
    width: 100,
    dataIndex: 'cost',
    scopedSlots: { customRender: 'cost' },
    defaultSortOrder: 'descend',
    sortDirections:['descend','ascend'],
    sorter: (a,b) => a.cost-b.cost,
  },
  {
    title: '点击率',
    width: 100,
    dataIndex: 'ctr',
    scopedSlots: { customRender: 'ctr' },
    sortDirections:['descend','ascend'],
    sorter: (a,b) => a.ctr-b.ctr,
  },
  {
    title: '商品支付成功量',
    width: 180,
    dataIndex: 'dsOcpcConversionsDetail90',
    sortDirections:['descend','ascend'],
    sorter: (a,b) => a.dsOcpcConversionsDetail90-b.dsOcpcConversionsDetail90,
  },
  {
    title: '直播间成单量',
    width: 180,
    dataIndex: 'dsOcpcConversionsDetail80',
    sortDirections:['descend','ascend'],
    sorter: (a,b) => a.dsOcpcConversionsDetail80-b.dsOcpcConversionsDetail80,
  },
  {
    title: '总成单',
    width: 100,
    dataIndex: 'sales',
    scopedSlots: { customRender: 'sales' },
    sortDirections:['descend','ascend'],
    sorter: (a,b) => a.sales-b.sales,
  },
  {
    title: '总成单差值',
    width: 160,
    dataIndex: 'diff_sales',
  },
  {
    title: '点击差值',
    width: 160,
    dataIndex: 'diff_click',
    scopedSlots: { customRender: 'diff_click' },
  },
  {
    title: '消费差值',
    width: 160,
    dataIndex: 'diff_cost',
    scopedSlots: { customRender: 'diff_cost' },
  },
  {
    title: '展现差值',
    width: 160,
    dataIndex: 'diff_impression',
  },
]
export default {
  data() {
    return {
      columns,
      loading:false,
      dataSource:[],
      total_dataSource:[],
      total:0,
      changeKey:'cost',
      changeOrder:'DESC',
      keyWord:'',
      optimizer:0,
      optimizerList:[],
      optimizerSelectDisable:false,

      selectedRowKeys:[],
      selectedRowsForId:[], //搬迁功能的id

      page:1,
      pagesize:10,
    }
  },
  created(){
    this.getQiliangData()
    this.getOptimizerList()
  },
  methods:{
    getQiliangData(){
      let params = {
        column:this.changeKey,
        sortrule:this.changeOrder,
        page: this.page,
      }
      if(this.optimizer != 0){
        params.optimizer = this.optimizer
      }
      this.loading = true
      getRecessions(params).then((res) => {
        this.loading = false
        if(res.errcode == 0){
          this.dataSource = res.data
          this.total_dataSource = res.data
          this.total = res.data.length
          this.onSearch(this.keyWord)
        }
      }).catch(() => {
        this.loading = false
      });
    },
    getOptimizerList(){
      getOptimizerList({}).then((res) => {
        if(res.errcode == 0){
          this.optimizerList = res.data
          this.setOptimizer()
        }
      }).catch(() => {
        
      });
    },
    setOptimizer(){
      // 判断当前登录账号是否优化师，是则不允许选择搜索只能看自己的
      let userInfo = this.$store.state.user.userInfo
      if(userInfo){
        let isoptimizer = userInfo.isoptimizer // 0不是， 1是优化师
        if(isoptimizer == 1){
          let admin_user_id = userInfo.admin_user_id
          let f = this.optimizerList.find(e=>e.id == admin_user_id)
          if(f){
            this.optimizer = admin_user_id
            this.optimizerSelectDisable = true
          }
        }
      }
    },
    onSearch(e){
      let total_dataSource = JSON.parse(JSON.stringify(this.total_dataSource))
      let dataSource = total_dataSource.filter(o=>o.userName.indexOf(e) != -1)
      this.dataSource = dataSource
    },
    getSorter(sorter){
      if(sorter.column){
        this.changeKey = sorter.column.dataIndex
        switch(sorter.order){
          case "ascend":
            this.changeOrder = 'ASC'
            break
          case "descend":
            this.changeOrder = 'DESC'
            break
        }
      }else{
        this.changeKey = ''
        this.changeOrder = ''
      }
    },
    selectChange(){
      this.getQiliangData()
    },
    open(){
      if(this.selectedRowsForId.length > 0){
        this.$message.success('启用成功')
      }
    },
    stop(){
      if(this.selectedRowsForId.length > 0){
        this.$message.warning('停止成功')
      }
    },
    selectedRowChange(selectedRowKeys, selectedRows){
      console.log('selectedRowChange',selectedRowKeys, selectedRows)
      this.selectedRowsForId = selectedRows.map(e=>e.campaignFeedId)
    },
    onChange(pagination) {
      // console.log(pagination, filters, sorter)
      // if(sorter.columnKey != 'diff'){
      if(this.page != pagination.current){
        // this.page = pagination.current
        // this.getSorter(sorter)
        // this.getQiliangData()
      }
    },
  },
  components:{StandardTable}
}
</script>

<style lang="less" scoped>

</style>